<template>
  <div class="container-fluid shopCart">
    <div class="cartTitle">购物车</div>
    <div class="cartBox">
      <div class="row align-items-center cartItem" v-for="(cartItem, index) in cartList" :key="index"> 
        <div class="col-1 goodsCheck"><input type="checkbox" :checked="cartItem.isSelect" @change="changeChecked(cartItem.id, $event)"/></div>
        <div class="col-2 goodsImg"><img :src="cartItem.imgurl" /></div>
        <div class="col-3 goodsTitle">
          {{cartItem.title}}
        </div>
        <div class="col-1 goodsPrice">
          {{cartItem.price}}
        </div>
        <div class="col-2 goodsParams">
          <div>颜色：<span>{{cartItem.color}}</span></div>
          <div>尺码：<span>{{cartItem.size}}</span></div>
        </div>
        <div class="col-1 goodsNum">x{{cartItem.num}}</div>
        <div class="col-2 goodsDelete" @click="delCartList(cartItem.id)"><button class="btn-secondary">删除</button></div>
      </div>
    </div>
    <div class="sumary">
      <div class="allSelect"><input type="checkbox" @change="changeAllChecked($event)" :checked="isAllChecked">全选</div>
      <div class="payDetail">
        <div class="goodsCount">商品总数：<span>{{totlaCount}}件</span></div>
        <div class="countPrice">优惠价格：<span>{{totalPrice}}.00</span></div>
        <div class="total">总价：<span>{{totalPrice}}.00</span></div>
      </div>
    </div>
    <div class="payBtn">
      <button  class="payButton" @click="goPaying">结算</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  mounted(){
    this.getCartData()
  },
  computed:{
    ...mapState({
      cartList:(state)=> state.shopCart.cartList || []
    }),
    //选择的商品数组
    isCheckedList(){
      return this.cartList.filter(item=>item.isSelect == true)
    },
    //控制全选
    isAllChecked(){
      return this.cartList.every(item=>item.isSelect == true)
    },
    //已选商品总价格
    totalPrice(){
      return this.isCheckedList.reduce((pre,next)=>pre+next.price*next.num,0)
    },
    //已选商品总数量
    totlaCount(){
      return this.isCheckedList.reduce((pre,next)=>pre+next.num,0)
    }
  },
  methods:{
    getCartData(){
      this.$store.dispatch('getCartList')
    },
    //单选checked值改变
    changeChecked(itemId, e){
      let params = {
        skuId: itemId,
        isSelect: e.target.checked
      };
      this.$store.dispatch("updataCheck", params);
      this.getCartData();
    },
    //全选checked值改变
    changeAllChecked(e){
      let params = {
        isSelect: e.target.checked
      };
      this.$store.dispatch("updataAllCheck", params);
      this.getCartData();
    },
    //删除购物车商品
    delCartList(skuId){
      const params = {
        skuId
      }
      this.$store.dispatch('delShopCart',params)
      this.getCartData()
    },
    //跳转到结算页面
    goPaying(){
      this.$router.push({name:'Paying',params:{payList:this.isCheckedList}})
    }
  }
}
</script>

<style lang="less" scoped>
.shopCart {
  width: 80%;
  margin: 0 auto;
  // background-color: rgb(230, 243, 250);
}
.cartTitle {
  padding-top: 110px;
  font-size: 2vw;
}
.cartItem {
  margin: 30px 0;
  font-size: 1vw;
  background-color: #fff;
  .goodsImg {
    overflow: hidden;
    img {
      width: 97%;
    }
  }
  .goodsParams {
    text-align: center;
  }
}
.sumary{
  font-size: 1.2vw;
 border-top: 1px solid #333;
 .allSelect{
  margin-top: 10px;
 }
 .payDetail{
  margin: 20px 0;
  font-weight: bold;
  .countPrice{
    margin: 10px 0;
  }
 }
}
.payButton{
  width: 20%;
  margin-bottom: 30px;
  border: none;
  font-size: 16px;
  line-height: 40px;
  color:#fff;
  background-color: #333;
 }
</style>
